<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/shoppingCar.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-md-2">
          <a href="index.html"><span class="logo-text">DJI 大疆官网</span></a>
          <a href="javascript:void(0)" class="Logined none">
            <span>
              欢迎,<span class="userName"></span>
            </span>
          </a>
        </div>
        <div class="col-md-10">
          <div class="header-right">
            <span><a href="my_account.html" class="myAccount none">我的账号</a></span>
            <a href="login.html" class="unLogin"><span>登录</span></a>
            <span class="line"></span>
            <a href=""><span class="car">购物车</span></a>
            <span class="iconfont icon-gouwuche"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <section>
    <div class="container">
      <h2>我的购物车</h2>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-12 top">
          <div class="div">
            <div class="col-md-1">
              商品
            </div>
            <div class="col-md-2">

            </div>
            <div class="col-md-4">

            </div>
            <div class="col-md-1">
              价格
            </div>
            <div class="col-md-2">
              数量
            </div>
            <div class="col-md-1">
              小计
            </div>
            <div class="col-md-1">

            </div>
          </div>

        </div>
        <div class="row list-cont">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <span>全选:</span>
          <div class="select selAll">
            <span class="iconfont icon-fuxuankuangkong
            "></span>
            <span class="iconfont icon-fuxuankuang
            "></span>
            <span class="showCheck
            " data-select='1'></span>
          </div>
        </div>
        <div class="col-md-4">
          <span class="pay-price">总计（不包括运费）:$ <span class="payPriceNum">0</span></span>
          <div class="pay-btn">去结算</div>
        </div>
      </div>
    </div>
    <div class="pay"></div>
  </section>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <script src="./js/url.js"></script>
  <script>
    if (localStorage.username) {
      $('.userName').text(localStorage.username)
      $('.unLogin').addClass('none')
      $('.Logined,.myAccount').removeClass('none')
    }
  </script>
  <script>
    //购物车list列表5.1
    function showList() {
      $.ajax({
        type: "POST",
        url: carUrl,
        data: { 'type': 'list' },
        dataType: 'json',
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          cancelAllCheck()
          if (res.status === 0) {
            $('.payPriceNum').text(res.data.cartTotalPrice)
            console.log(res.data.cartProductVOList)
            let data = res.data.cartProductVOList
            console.log(data)
            for (let i = 0; i < data.length; i++) {
              let product_name = data[i].product_name
              let product_id = data[i].product_id
              let price = data[i].price
              let quantity = data[i].quantity
              let checked = data[i].checked
              console.log(checked)
              let subtitle = data[i].subtitle
              let main_image = data[i].main_image
              let li =
                `
              <div class="col-md-12">
              <div class="goods-list-item" product-id="${product_id}">
                <div class="col-md-1 sel" >
                  <div class="select" >
                    <span class="iconfont icon-fuxuankuangkong
                    "></span>
                    <span class="iconfont none icon-fuxuankuang
                    "></span>
                    <span class="showCheck
                    " data-select='0'></span>
                  </div>
                </div>
                <div class="col-md-2 carImg">
                  <div class="carPic">
                    <img src="${imgUrl + main_image}" alt="">
                  </div>
                </div>
                <div class="col-md-4 name">
                  <h3>${product_name}</h3>
                  <p>${subtitle}</p>
                </div>
                <div class="col-md-1 s-price">
                  $<span class="price singlePrice">${price}</span>
                </div>
                <div class="col-md-2 con_num_out">
                  <div class="con_num">
                    <span class="sub pointer">-</span>
                    <span class="nums">${quantity}</span>
                    <span class="add pointer">+</span>
                  </div>
                </div>
                <div class="col-md-1 t-price">
                  <span>$</span> <span class="price totalPrice">${quantity * price}</span>
                </div>
                <div class="col-md-1 delete">
                  <span class="iconfont icon-shanchu"></span>
                </div>
              </div>
            </div>
            `
              $('.list-cont').append(li)
            }
          }
        },
        error: function () {
          console.log('错误')
        }
      })
    }
    showList()
  </script>
  <script>
    //复选框 5.5  5.6
    $('.list-cont').on('click', '.showCheck', function () {
      let product_id = $(this).parents('.goods-list-item').attr('product-id')
      let dataSelect = $(this).attr('data-select')
      let that = this
      console.log(dataSelect)
      //取消选中5.6
      if (dataSelect === '1') {
        $.ajax({
          type: 'POST',
          url: carUrl,
          data: { 'type': 'un_select', 'product_id': product_id },
          dataType: 'json',
          xhrFields: { withCredentials: true },
          success: function (res) {
            console.log(res)
            $('.payPriceNum').text(res.data.cartTotalPrice)
            if (res.status === 0) {
              $(that).siblings('.icon-fuxuankuang').addClass('none')
              $(that).attr('data-select', '0')
            }
          }
        })
      } else { //选中5.5
        $.ajax({
          type: 'POST',
          url: carUrl,
          data: { 'type': 'select', 'product_id': product_id },
          dataType: 'json',
          xhrFields: { withCredentials: true },
          success: function (res) {
            console.log(res)
            $('.payPriceNum').text(res.data.cartTotalPrice)
            if (res.status === 0) {
              $(that).siblings('.icon-fuxuankuang').removeClass('none')
              $(that).attr('data-select', '1')
            }
          }
        })
      }
    });
    //数量减 5.3
    $('.list-cont').on('click', '.sub', function () {
      let product_id = $(this).parents('.goods-list-item').attr('product-id')
      let totalPrice = $(this).parent().parent().siblings('.t-price').find('.totalPrice')
      let singlePrice = $(this).parent().parent().siblings('.s-price').find('.singlePrice')
      let sPrice = singlePrice.text()
      let nums = $(this).siblings('.nums').text()
      if (nums > 1) {
        nums--
        tPrice = (sPrice * nums).toFixed(1)
        totalPrice.text(tPrice)
        $(this).siblings('.nums').text(nums)
        update(nums, product_id)
      }
    })
    //数量加 5.3
    $('.list-cont').on('click', '.add', function () {
      let product_id = $(this).parents('.goods-list-item').attr('product-id')
      let totalPrice = $(this).parent().parent().siblings('.t-price').find('.totalPrice')
      let singlePrice = $(this).parent().parent().siblings('.s-price').find('.singlePrice')
      let sPrice = singlePrice.text()
      let nums = $(this).siblings('.nums').text()
      nums++
      tPrice = (sPrice * nums).toFixed(1)
      totalPrice.text(tPrice)
      $(this).siblings('.nums').text(nums)
      update(nums, product_id)
    })
    //删除商品 5.4
    $('.list-cont').on('click', '.icon-shanchu', function () {
      let product_id = $(this).parents('.goods-list-item').attr('product-id')
      console.log(product_id)
      // $(this).parents('.col-md-12')[0].remove()
      let that = this
      $.ajax({
        type: 'POST',
        url: carUrl,
        data: { 'type': 'delete_product', 'product_id': product_id },
        dataType: 'json',
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          $('.payPriceNum').text(res.data.cartTotalPrice)
          if (res.status === 0) {
            console.log('删除成功')
            $(that).parents('.col-md-12')[0].remove()
          }
        }
      })
    })
    //更新商品数量 5.3
    function update(nums, product_id) {
      $.ajax({
        type: 'POST',
        url: carUrl,
        data: { 'type': 'update', 'product_id': product_id, 'count': nums },
        dataType: 'json',
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          $('.payPriceNum').text(res.data.cartTotalPrice)
          if (res.status === 0) {
          }
        }
      })
    }
    //全选、取消全选5.8,5.9
    $('.showCheck').on('click', function () {
      let dataSelect = $(this).attr('data-select')
      let that = this
      console.log(dataSelect)
      //取消全选5.9
      if (dataSelect === '1') {
        cancelAllCheck()
      } else { //全选5.8
        AllCheck()
      }
    });
    function cancelAllCheck() {
      $.ajax({
        type: 'POST',
        url: carUrl,
        data: { 'type': 'un_select_all' },
        dataType: 'json',
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            $('.payPriceNum').text(res.data.cartTotalPrice)
            $('.icon-fuxuankuang').addClass('none')
            $('.showCheck').attr('data-select', '0')
            $('.list-cont').find('.icon-fuxuankuang').addClass('none')
            $('.list-cont').find('data-select', '0')
          }
        }
      })
    }
    function AllCheck() {
      $.ajax({
        type: 'POST',
        url: carUrl,
        data: { 'type': 'select_all' },
        dataType: 'json',
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          $('.payPriceNum').text(res.data.cartTotalPrice)
          if (res.status === 0) {
            // $(that).siblings('.icon-fuxuankuang').removeClass('none')
            // $(that).attr('data-select', '1')
            $('.icon-fuxuankuang').removeClass('none')
            $('.showCheck').attr('data-select', '1')

            $('.list-cont').find('.icon-fuxuankuang').removeClass('none')
            $('.list-cont').find('data-select', '1')
          }
        }
      })
    }

    //创建订单
    function createOrder(address_id) {
      $.ajax({
        type: 'POST',
        url: orderUrl,
        data: { 'type': 'create', 'address_id': address_id },
        dataType: 'json',
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            window.location.href = 'order.html';
          }
        }
      })
    }
    $('.pay-btn').click(function () {
      // $.ajax({
      //   type: 'POST',
      //   url: addressUrl,
      //   data: {
      //     'type': 'list', 'pageNum': 1, 'pageSize': 1
      //   },
      //   dataType: 'json',
      //   xhrFields: { withCredentials: true },
      //   success: function (res) {
      //     console.log(res.data[0].id)
      //     const address_id = res.data[0].id
      //     createOrder(address_id)
      //   }
      // })
      const goods = [
        {
          img: ''
        }
      ]
      window.location.href = 'order.html';
    })
  </script>
</body>

</html>